<!-- 购物车 -->
<template>
	<view class="page">
		<view class="head">
			<!-- #ifdef APP-PLUS -->
			<view class="title">购物车</view>
			<!-- #endif -->
			<view class="edit" @click="isEdit = !isEdit">
				<text>{{isEdit?'完成':'编辑'}}</text>
			</view>
		</view>
		<!-- 购物车列表 -->
		<mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption"
			:top="0">
			<view class="cart-list">
				<view class="list" v-for="(item,index) in goodsList" :key="index">
					<view class="check">
						<checkbox :checked="item.checked" :value="item.id" @click="checkboxChange(index)" />
					</view>
					<view class="goods">
						<view class="thumb">
							<image :src="ip+item.img" mode="heightFix"></image>
						</view>
						<view class="item">
							<view class="title">
								<text class="two-omit">{{item.goodsName}}</text>
							</view>
							<view class="price-num">
								<view class="price">
									<text class="min">￥</text>
									<text class="max" :model="item.buyPrice">{{item.buyPrice}}</text>
								</view>
								<view class="num">
									<view class="add">
										<text class="iconfont icon-jian" @click="onJian(item,index)"></text>
									</view>
									<view class="number">
										<text :model="item.goodsNum">{{item.goodsNum}}</text>
									</view>
									<view class="add">
										<text class="iconfont icon-jia" @click="onJia(item,index)"></text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 购物车失效商品列表 -->
			<view class="lose-efficacy-list">
				<view class="lose-efficacy-title">
					<view class="title">
						<text>失效商品{{unCartList.length}}件</text>
					</view>
					<view class="empty">
						<text>清空失效商品</text>
					</view>
				</view>
				<view class="list" v-for="(item,index) in unCartList" :key="index">
					<view class="tag">
						<text>失效</text>
					</view>
					<view class="goods" @click="onSkip('goods')">
						<view class="pictrue">
							<image :src="ip+item.img" mode=""></image>
						</view>
						<view class="item">
							<view class="title">
								<text class="two-omit">{{item.goodsName}}</text>
							</view>
							<view class="explain">
								<text>商品已下架或当天已售完！</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 为你推荐 -->
			<view class="recommend-info">
				<view class="recommend-title">
					<view class="title">
						<image src="/static/wntj_title.png" mode=""></image>
					</view>
				</view>
				<view class="goods-list">
					<view class="list" v-for="(item,index) in reGoodsList" @click="onSkip('goods',item.goodsId,item.goodsPrice,item.activityPrice,item.test,item.goodsInfo,item.num,item.img,item.goodsName)" :key="index">
						<view class="pictrue">
							<image :src="ip+item.img" mode="heightFix"></image>
						</view>
						<view class="title-tag">
							<view class="tag">
								<text v-if="item.offer === 15">特价</text>
								{{item.goodsName}}
							</view>
						</view>
						<view class="price-info">
							<view class="user-price">
								<text class="min">￥</text>
								<text class="max">{{item.goodsPrice}}</text>
							</view>
							<view class="vip-price">
								<text>￥{{item.activityPrice}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 结算 -->
			<view class="close-account">
				<view class="check-total">
					<view class="check">
						<checkbox @click="selectAll" :checked="isSelectAll" />
						<text class="all">全选</text>
					</view>
					<view class="total">
						<text>合计：</text>
						<text class="price">￥{{price}}</text>
					</view>
				</view>
				<view class="account">
					<view class="btn-calculate" v-if="!isEdit" @click="getTotal">
						<text>去结算({{checkedList.length}})</text>
					</view>
					<view class="btn-del" v-else>
						<text class="del" @click="del">删除</text>
					</view>
				</view>
			</view>
		</mescroll-body>
		<!-- tabbar -->
		<TabBar :tabBarShow="3"></TabBar>
	</view>
</template>

<script>
	import TabBar from '../../components/TabBar/TabBar.vue';
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {baseUrl} from '@/config/baseUrl.js';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			TabBar,
		},
		data() {
			return {
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					use: false,
					toTop: {
						src: '',
					}
				},
				isEdit: false,
				checkedList: [],
				isSelectAll: false, // 是否全部被选中
				goodsList: [],
				reGoodsList: [],
				unCartList:[],
				price: 0,
				ip:"http://43.142.173.112:9090/images/",
				goodsIdList:[],
			};
		},
		onReady() {
			uni.hideTabBar()
		},
		onLoad() {
			this.getData();
			this.getReData();
			this.isSelectAll = false;
		},

		methods: {
			/**
			 * 结算
			 */
			getTotal(){
				if(this.checkedList.length >0) {
					uni.setStorageSync("kill",false);
					var list = [];
					for (var i = 0; i < this.checkedList.length; i++) {
						list.push(this.goodsList[this.checkedList[i]])
					}
					uni.navigateTo({
						url: '/pages/ConfirmOrder/ConfirmOrder?goodsList=' + encodeURIComponent(JSON.stringify(list))+'&price='+this.price,
					})
				}else{
					uni.showToast({
					    title: '请先选择结算商品',
					    icon: 'error',
					    mask: true,
					});
				}
				
			},
			/** 全选复选框的checkbox-group  changge事件 */
			selectAll() {
				this.checkedList = [];
				if (this.isSelectAll) {
					this.isSelectAll = false;
					for (var i = 0; i < this.goodsList.length; i++) {
						this.$set(this.goodsList[i], 'checked', false);
					}
				} else {
					this.isSelectAll = true;
					for (var i = 0; i < this.goodsList.length; i++) {
						this.$set(this.goodsList[i], 'checked', true);
						this.checkedList.push(this.goodsList[i].id);
					}
				}
				this.getPrice();
			},
			checkboxChange: function(index) {
				if (this.goodsList[index].checked) {
					this.goodsList[index].checked = false;
					var index0 = this.goodsIdList.findIndex(item => {
					       if (item==this.goodsList[index].goodsId) {
					            return true
					            }
					          })
					this.goodsIdList.splice(index0, 1)
				} else {
					this.goodsList[index].checked = true;
					this.goodsIdList.push(this.goodsList[index].goodsId);
				}

				//加入数组
				this.checkedList = [];
				for (var i = 0; i < this.goodsList.length; i++) {
					if (this.goodsList[i].checked) {
						this.checkedList.push(this.goodsList[i].id);
					}
				}
				console.log("商品id集合："+this.goodsIdList)
				this.getPrice();
				//全选
				var check = 0;
				for (var i = 0; i < this.goodsList.length; i++) {
					if (!this.goodsList[i].checked) {
						check = 1;
					}
				}
				if (check == 1) {
					this.isSelectAll = false;
				} else {
					this.isSelectAll = true;
				}

			},
			getPrice(){
				//金额计算
				this.price = 0;
				if (this.checkedList.length == 0) {} else {
					for (var i = 0; i < this.checkedList.length; i++) {
						console.log(this.checkedList[i])
						this.price = this.goodsList[this.checkedList[i]].buyPrice + this.price;
						
					}
				}
			},

			//购物车数量减一
			onJian(item, index) {
				if (this.goodsList[index].goodsNum > 1) {
					this.goodsList[index].goodsNum = item.goodsNum - 1;
					this.goodsList[index].buyPrice = item.activityPrice * this.goodsList[index].goodsNum;
					this.getPrice();
				} else {

				}
			},
			//购物车数量加一
			onJia(item, index) {
				// if(){}
				this.goodsList[index].goodsNum = item.goodsNum + 1;
				this.goodsList[index].buyPrice = item.activityPrice * this.goodsList[index].goodsNum;
				this.getPrice();
			},
			//获取首页数据
			getData() {
				let userId = uni.getStorageSync("userId")
				let shopsId = uni.getStorageSync("shopsId")
				uni.request({
					url: baseUrl + "/buyCart/GoodsList",
					method: 'POST',
					data: {
						shopsId: 1,
						userId: uni.getStorageSync("userId"),
						// userId : 1,
					},
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						console.log("购物车",res)
						this.goodsList = res.data.goodsList;
						console.log("商品列表",this.goodsList)
						for (var i = 0, lenI = this.goodsList.length; i < lenI; ++i) {
							this.$set(this.goodsList[i], 'checked', false);
							this.$set(this.goodsList[i], 'id', i);
						}
						this.unCartList = res.data.unCartList;
					}
				})
			},
			getReData() {
				uni.request({
					url: baseUrl + "/index/recommend",
					method: 'POST',
					data: {
						// shopsId: uni.getStorageSync("shopsId"),
						// userId: uni.getStorageSync("userId"),
						shopsId: 1,
						userId: uni.getStorageSync("userId")
					},
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						
						this.reGoodsList = res.data.goodsList
					}
				})
			},
			/**
			 * 跳转点击
			 * @param {String} type 跳转类型
			 */
			onSkip(type,goodsId,goodsPrice,activityPrice,test,goodsInfo,num,img,goodsName) {
				switch (type) {
					case 'classify':
						uni.navigateTo({
							url: '/pages/SearchGoodsList/SearchGoodsList',
						})
						break;
					case 'goods':
						uni.navigateTo({
							url: '/pages/GoodsDetails/GoodsDetails?goodsId='+goodsId+'&goodsPrice='+goodsPrice+'&activityPrice='+activityPrice+'&test='+test+'&goodsInfo='+goodsInfo+'&num='+num+'&img='+img+'&goodsName='+goodsName,
							animationType: 'zoom-fade-out',
							animationDuration: 200,
								
						})
						break;
				}
			},
			del(){
				uni.request({
					// 192.168.2.111 本机ip  localhost
					url: baseUrl + "/buyCart/delGoodsList",
					method: 'POST',
					data: {
						userId:uni.getStorageSync("userId"),
						goodsIdList:this.goodsIdList
					},
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
					
										uni.reLaunch({
															  url: '/pages/cart/cart',
															  
															}) 
															uni.showToast({
																				title: '删除商品成功',
																				icon: 'success',
																				mask: true,
																			});
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'cart.scss';
</style>
